<template>
  <div class="info">
    <div class="t1">
      {{ Infos.houseName }}
    </div>
    <div class="t2">
      <template v-for="(item, i) in Infos.houseTags" :key="i">
        <span v-if="item.tagText" :style="{ color: item.tagText.color, background: item.tagText.background.color }">{{
          item.tagText.text }}</span>
      </template>
    </div>
    <div class="t3 all">
      <div class="left">
        <span class="l1">
          {{ Infos.commentBrief.overall }}
        </span><span class="l2"> {{ Infos.commentBrief.scoreTitle }}</span><span class="l3"> {{
          Infos.commentBrief.commentBrief }}</span>
      </div>
      <div class="right">
        <span>{{ Infos.commentBrief.totalCount }}条评论</span>
      </div>
    </div>
    <div class="t4 all">
      <div class="left">
        <span class="l2">
          {{ Infos.nearByPosition.address }}
        </span>
      </div>
      <div class="right">
        <span> 地图·周边</span>
      </div>
    </div>
  </div>
</template>
<script setup>

const props = defineProps(['Infos'])
</script>
<style lang="less" scoped>
.info {
  padding: 16px;
  background-color: #fff;

  .t1 {
    font-weight: 700;
    font-size: 20px;
    color: #333;
    text-align: justify;
    line-height: 24px;
    overflow: hidden;
    margin-bottom: 6px;
  }

  .t2 {
    margin: 10px 0;

    span {
      font-size: 12px;
      margin: 0 2px;
      padding: 1px 3px;
    }
  }

  .all {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 12px 0;
    border-radius: 5px;
    font-size: 12px;
    background-color: #f5f7fa;

    .left {
      font-size: 12px;

      .l1 {
        font-size: 18px;
        font-weight: 700;
        color: #333;
      }

      .l2 {
        font-size: 13px;
        font-weight: 600;
        padding: 0 4px;
      }

      .l3 {
        color: gray;
      }
    }

    .right {
      color: rgb(255, 150, 69);

      &::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-left: 1px solid rgb(255, 150, 69);
        border-bottom: 1px solid rgb(255, 150, 69);
        transform: rotate(223deg);
        margin-left: 8px;
      }
    }

  }
}
</style>
